import React, { useState, useEffect } from 'react'
import PubSub from 'pubsub-js'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import Item from './components/Item/Item'
import './App.css'
export default function App() {
  const [list, setList] = useState([
    {
      id: 2,
      todoName: '吃饭',
      isDone: true,
    },
    {
      id: 1,
      todoName: '睡觉',
      isDone: false,
    },
  ])

  console.log('app函数中打印的list', list)

  useEffect(() => {
    // 添加任务
    const addId = PubSub.subscribe('add', (topic, todoName) => {
      // 根据任务名创建任务对象
      const todo = {
        todoName,
        isDone: false,
        // 前提: list有数据的情况下,我们利用unshift往数据的前面添加数据
        //所以每一次找到数组中的第一条数据,根据第一条数据的id+1.如果list是空数组,则新任务对象的id直接写成1
        id: list.length ? list[0].id + 1 : 1, //id要求必须是整数,不能和其他任务数据的id重复
      }

      // 往数组的前面加一条数据
      // list.unshift(todo)
      // 根据旧的数组,创建一个新的数组
      console.log('pubsub回调中打印的list', list)
      const newList = [...list]
      newList.unshift(todo)

      // 调动setList,让组件更新
      // 注意： 由于useState帮我们做了性能优化,所以如果我们直接修改list,则list的地址没有发生变化,react就认为数据没有发生变化,不给我们更新
      setList(newList)
    })
    return () => {
      PubSub.unsubscribe(addId)
    }
  })

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header></Header>
        <div>
          <List>
            {list.map((item) => {
              return <Item key={item.id} todo={item}></Item>
            })}
          </List>
          <Footer></Footer>
        </div>
      </div>
    </div>
  )
}
